<template>
  <div>
    <div class="viewmodel"
         v-for="list in lists"
         :key="list.id">
      <form action="https://wx.lianwen.com/m/mobile/pay_phone"
            method="POST">
        <div class="view-cell">
          <div class="cell-left">
            <h2>{{list.title}}</h2>
            <div>版本：{{list.name}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;作者：{{list.writer}}
            </div>
          </div>
          <div>
            <p class="status">{{list.status}}</p>
          </div>
        </div>
        <input type="hidden"
               name="counts"
               :value="list.words">
        <input type="hidden"
               name="money"
               :value="list.price">
        <input type="hidden"
               name="phone"
               value="13232323232">
        <input name="paytype"
               type="hidden"
               value="alipay">
        <div class="viewbt">
          <div><input type="submit"
                   v-if="list.status=='待支付'"
                   value="去支付"
                   style="background: rgb(7, 193, 96);font-size: 0.26rem;line-height: 0.5rem;width:auto;height:0.5rem;border:none;color:#fff">
            <span v-if="list.status=='已支付'"
                  @click="Toasts">检测中</span>
            <span v-if="list.status=='检测完成'">查看报告</span>
          </div>
        </div>
      </form>
    </div>
  </div>

</template>

<script>
import { Toast } from 'vant';
export default {
  data () {
    return {
      lists: [],

    }
  },
  created () {
    this.$http.getChecklist().then(resp => {
      this.lists = resp
      console.log(this.lists)
    })
  },
  methods: {
    Toasts () {
      Toast({ message: '检测中，请稍后', duration: 500 });
    }
  }
}
</script>

<style scoped>
.viewmodel {
  margin: 0.25rem 0;
  background: #fff;
}
.viewmain {
}
.view-cell {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  justify-content: space-between;
}
.spansize {
  width: auto;
  height: 0.5rem;
}
.cell-left div {
  color: #969799;
}
.viewbt {
  border-top: 0.02rem solid #969696;
  height: 0.67rem;
  margin: 0 0.2rem;
}
.viewbt div {
  line-height: 0.67rem;
  float: right;
}
.viewbt div span {
  font-size: 0.26rem;
  background: rgb(7, 193, 96);
  margin-right: 0.1rem;
  padding: 0.03rem 0.1rem;
  color: #fff;
}
.status {
  color: #ee0a24;
}
</style>